// 封装的token
tokenSet();

// 渲染班级概况
async function getVerview() {
  const res = await axios({ url: "student/overview" });
  const { avgAge, avgSalary, proportion, total } = res.data.data;
  document.querySelector(".total").innerHTML = total;
  document.querySelector(".avgAge").innerHTML = avgAge;
  document.querySelector(".avgSalary").innerHTML = avgSalary;
  document.querySelector(".proportion").innerHTML = proportion;
}
getVerview();
getStudent();
getScoreBatch();

// 薪资
async function getStudent() {
  const res = await axios({ url: "student/list" });
  console.log(res);
  readerSalary(res.data.data);
  getProvince(res.data.data);
}
// 折线图
function readerSalary(studentList) {
  const nameList = studentList.map((item) => item.name); //姓名
  const salaryList = studentList.map((item) => item.salary); //期望薪资
  const truesalaryList = studentList.map((item) => item.truesalary); //实际薪资

  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector(".line"));

  const colors = ["#5470C6", "#EE6666"];
  option = {
    color: colors,
    legend: {},

    xAxis: [
      {
        // prettier-ignore
        data:nameList,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 10,
      },
      {
        start: 0,
        end: 10,
      },
    ],
    series: [
      {
        name: "期望薪资",
        type: "line",
        smooth: true,
        data: salaryList,
      },
      {
        name: "实际薪资",
        type: "line",
        smooth: true,
        data: truesalaryList,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
// 成绩面板
async function getScoreBatch(batch = 2) {
  const res = await axios({
    url: "score/batch",
    method: "get",
    params: {
      batch,
    },
  });
  console.log(res);
  const { avgScore, group, gt60, gt80, lt60 } = res.data.data;
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector(".barChart"));
  const option = {
    // 设置宽度和高度
    grid: {
      // 设置图表距离顶部的距离
      top: 20,
      bottom: 20,
    },

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },

    legend: {
      data: ["平均分", "低于60分人数", "60到80分之间", "高于80分人数"],
    },
    xAxis: [
      {
        type: "category",
        // 组名
        data: group,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        max: 100, // 暂定100分，具体业务 看项目要求！！
        axisLabel: {
          formatter: "{value} 分",
        },
      },
      {
        type: "value",
        // max 考试人数 具体也看项目需求 - echat自动定 y刻度
        axisLabel: {
          formatter: "{value} 人",
        },
      },
    ],
    series: [
      {
        name: "平均分",
        type: "bar",
        data: avgScore,
      },
      {
        name: "低于60分人数",
        type: "bar",

        yAxisIndex: 1, // 对齐右侧y坐标
        data: lt60,
      },
      {
        name: "60到80分之间",
        type: "bar",

        yAxisIndex: 1, // 对齐右侧y坐标
        data: gt60,
      },
      {
        name: "高于80分人数",
        type: "bar",

        yAxisIndex: 1, // 对齐右侧y坐标
        data: gt80,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

}
const toggleBatchBtn = document.querySelector('#toggleBatchBtn')
const batchA = document.querySelector('#batch')
// 点击显示分组
toggleBatchBtn.addEventListener('click',function(e){
  batchA.classList.toggle('batch_show')
})
batchA.addEventListener('click',function(e){
  if (e.target.tagName === 'A') {
    const batch = e.target.dataset.index
    getScoreBatch(batch)
  }
})


// 地图
function getDiTu() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector("#diTu"));

  /**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果

默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

http://echarts.baidu.com/option.html#series-map.geoIndex

并且加了pin气泡图标以示数值大小
*/
  let  points = [
    { value: [118.8062, 31.9208], itemStyle: { color: "#4ab2e5" } },
    { value: [127.9688, 45.368], itemStyle: { color: "#4fb6d2" } },
    { value: [110.3467, 41.4899], itemStyle: { color: "#52b9c7" } },
    { value: [125.8154, 44.2584], itemStyle: { color: "#5abead" } },
    { value: [116.4551, 40.2539], itemStyle: { color: "#f34e2b" } },
    { value: [123.1238, 42.1216], itemStyle: { color: "#f56321" } },
    { value: [114.4995, 38.1006], itemStyle: { color: "#f56f1c" } },
    { value: [117.4219, 39.4189], itemStyle: { color: "#f58414" } },
    { value: [112.3352, 37.9413], itemStyle: { color: "#f58f0e" } },
    { value: [109.1162, 34.2004], itemStyle: { color: "#f5a305" } },
    { value: [103.5901, 36.3043], itemStyle: { color: "#e7ab0b" } },
    { value: [106.3586, 38.1775], itemStyle: { color: "#dfae10" } },
    { value: [101.4038, 36.8207], itemStyle: { color: "#d5b314" } },
    { value: [103.9526, 30.7617], itemStyle: { color: "#c1bb1f" } },
    { value: [108.384366, 30.439702], itemStyle: { color: "#b9be23" } },
    { value: [113.0823, 28.2568], itemStyle: { color: "#a6c62c" } },
    { value: [102.9199, 25.46639], itemStyle: { color: "#96cc34" } },
    { value: [119.4543, 25.9222] },
  ];
  // var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
   myChart.showLoading();
   let index = -1;

  
    echarts.registerMap("china", geoJson);
    myChart.hideLoading();
    option = {
      backgroundColor: "#013954",
      /*   title: {
            top: 20,
            text: '“困难人数” - 杭州市',
            subtext: '',
            x: 'center',
            textStyle: {
                color: '#ccc'
            }
        },*/

      // tooltip: {
      //     trigger: 'item',
      //     formatter: function(params) {
      //         console.log(params)
      //             return params.name + ' : ' + params.value[2];
      //     }
      // },
      /*visualMap: {
          min: 0,
          max: 1000000,
          right: 100,
          seriesIndex: 1,
          type: 'piecewise',
          bottom: 100,
          textStyle: {
            color: '#FFFF'
          },
          splitList: [
            {
              gt: 50000,
              color: '#F5222D',
              label: '困难人数大于5万人'
            }, //大于5万人
            {
              gte: 30000,
              lte: 50000,
              color: '#FA541C ',
              label: '困难人数3-5万人'
            }, //3-5万人
            {
              gte: 10000,
              lte: 30000,
              color: '#FA8C16',
              label: '困难人数1-3万人'
            }, //1-3万人
            {
              lte: 10000,
              color: '#fbe1d6',
              label: '困难人数小于1万人'
            }
          ]
        },*/

      geo: {
        map: "china",
        aspectScale: 0.75, //长宽比
        zoom: 1.1,
        roam: false,
        itemStyle: {
          normal: {
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "#09132c", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#274d68", // 100% 处的颜色
                },
              ],
              globalCoord: true, // 缺省为 false
            },
            shadowColor: "rgb(58,115,192)",
            shadowOffsetX: 10,
            shadowOffsetY: 11,
          },
          emphasis: {
            areaColor: "#2AB8FF",
            borderWidth: 0,
            color: "green",
            label: {
              show: false,
            },
          },
        },
        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              areaColor: "rgba(0, 10, 52, 1)",

              borderColor: "rgba(0, 10, 52, 1)",
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                },
              },
            },
          },
        ],
      },
      series: [
        {
          type: "map",
          roam: false,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#1DE9B6",
              },
            },
            emphasis: {
              textStyle: {
                color: "rgb(183,185,14)",
              },
            },
          },

          itemStyle: {
            normal: {
              borderColor: "rgb(147, 235, 248)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
            },
            emphasis: {
              areaColor: "rgb(46,229,206)",
              //    shadowColor: 'rgb(12,25,50)',
              borderWidth: 0.1,
            },
          },
          zoom: 1.1,
          //     roam: false,
          map: "china", //使用
          // data: this.difficultData //热力图数据   不同区域 不同的底色
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          showEffectOn: "render",
          zlevel: 1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: "fill",
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              offset: [15, 0],
              color: "#1DE9B6",
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: "#1DE9B6" /* function (value){ //随机颜色
 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
 }*/,
              shadowBlur: 10,
              shadowColor: "#333",
            },
          },
          symbolSize: 12,
          data: points,
        }, //地图线的动画效果
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: "arrow", //箭头图标
            symbolSize: 7, //图标大小
          },
          lineStyle: {
            normal: {
              color: "#1DE9B6",
              /* function (value){ //随机颜色
                        
                        ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
                        '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
                        '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
                        '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
                        '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
                        '#52b9c7','#4fb6d2','#4ab2e5']
 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
 }*/ width: 1, //线条宽度
              opacity: 0.1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          data: [
            {
              coords: [
                [118.8062, 31.9208],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#4ab2e5" },
            },
            {
              coords: [
                [127.9688, 45.368],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#4fb6d2" },
            },
            {
              coords: [
                [110.3467, 41.4899],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#52b9c7" },
            },
            {
              coords: [
                [125.8154, 44.2584],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#5abead" },
            },
            {
              coords: [
                [116.4551, 40.2539],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#f34e2b" },
            },
            {
              coords: [
                [123.1238, 42.1216],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#f56321" },
            },
            {
              coords: [
                [114.4995, 38.1006],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#f56f1c" },
            },
            {
              coords: [
                [117.4219, 39.4189],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#f58414" },
            },
            {
              coords: [
                [112.3352, 37.9413],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#f58f0e" },
            },
            {
              coords: [
                [109.1162, 34.2004],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#f5a305" },
            },
            {
              coords: [
                [103.5901, 36.3043],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#e7ab0b" },
            },
            {
              coords: [
                [106.3586, 38.1775],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#dfae10" },
            },
            {
              coords: [
                [101.4038, 36.8207],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#d5b314" },
            },
            {
              coords: [
                [103.9526, 30.7617],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#c1bb1f" },
            },
            {
              coords: [
                [108.384366, 30.439702],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#b9be23" },
            },
            {
              coords: [
                [113.0823, 28.2568],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#a6c62c" },
            },
            {
              coords: [
                [102.9199, 25.46639],
                [119.4543, 25.9222],
              ],
              lineStyle: { color: "#96cc34" },
            },
          ],
        },
      ],
    };
    myChart.setOption(option, true);


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
getDiTu(); 

//籍贯饼图
function getProvince(itemList) {
  // console.log(itemList,1111);
  let data = itemList.map((item) => item.province); 
  console.log(data, '1111');
  
  const dataList = [];
  data.forEach((item1) => {
    const index = dataList.findIndex((item2) => item1 === item2.name);
    // console.log(index,2222);
    if (index === -1) {
      dataList.push({ name: item1, value: 1 });
    } else {
      dataList[index].value++;
    }
  });
  console.log(dataList);

  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector(".pie"));
  option = {
    title: [
      {
        text: "籍贯",
        left: 20,
        top: 20,
      },
    ],
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 170],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: dataList,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
getVerview()
